<template>
    <span class="Boxx" :style="proStyle">{{ props.title }}</span> 
</template>

<script lang="ts" setup>
import { computed } from 'vue';

interface Props{
    title:string
    back?:string
    color?:string
    border?:string
    padding?:string
    fontSize?:string
    borderRadius?:string
}
const props = defineProps<Props>()
const proStyle = computed(() => {
    return{
        'background':props.back,
        'color':props.color,
        'border':props.border,
        'padding':props.padding,
        'font-size':props.fontSize,
        'border-radius':props.borderRadius
    }
})
</script>

<style lang="scss" scoped>
.Boxx{
    padding: 0 5px;
    border: 1px solid #9499A0;
    border-radius: 5px;
    font-size: 12px;
    color: #9499A0;
}
</style>